<template>
  <div class="main">
    <img src="@/assets/images/xyfc/xygg.png" class="bg1" alt>
    <div class="title">校园直播</div>
    <div class="sidebar">
      <scroll-container ref="scrollContainer">
        <multi-list @scrollTo="scrollTo" @scrollFoc="scrollFoc" :groupDatas="groupData" :head="head">
          <ul>
            <li :data-index="'tar_0_'+index" v-for="(item,index) in groupData.dataArr[0].data" :key="index">
              <div :class="{active: groupData.focArr[0][index]}">
                <img :src="item.images ? item.images[0].url : item.img.fhd" alt>
                <p>{{item.name}}</p>
                <span v-show="!item.isPlaybsack" class="voter-status">{{$store.state.live.status}}</span>
              </div>
              <i v-if="onselectId === '0-'+index"></i>
              <!--<span class="date">{{item.createTime ? item.createTime.substring(0,8) : item.base.createTime.split(' ')[0]}}</span>-->
            </li>
          </ul>
        </multi-list>
      </scroll-container>
    </div>
    <xxsintro2 :groupData="itemData"></xxsintro2>
  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import xxsintro2 from "@/components/xyfc/xyxxs-intro2";

  export default {
    name: "xyfc_xyxxs",
    components: {
      xxsintro2,
      scrollContainer,
      multiList
    },
    data() {
      return {
        groups: [0, 1],
        scrollY: 0,
        backObjName: "xyfc_xyxxs",
        onselectId: '',
        hs: this.$store.state.hs,
        bridge: this.$store.state.bridge,
        prevStb: "",
        head: {
          right: "1-0"
        },
        groupData: {
          dataArr: [{
            maxLine: 1,
            dynamic: false,
            title: "",
            data: []
          }],
          focArr: [
            []
          ]
        },
        itemData: {},
        live: {}
      };
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y;
      },
      scrollTo(targetIndex) {
        this.$refs.scrollContainer.scrollTo(targetIndex);
      },
      scrollFoc(obj) {

      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      startLive(objindex) {
        if (Object.keys(this.live).length === 0) {
          // 关闭视频
          this.bridge.closeVedio();
          // 获取视频信息相关
          this.hs.ajax.get(
            "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/material/find?materialId=" +
            this.groupData.dataArr[0].data[objindex].id +
            "&schoolId=" +
            this.$store.state.school.id,
            data => {
              data = JSON.parse(data);
              //console.log(data);
              if (data.head.code === 1) {
                this.itemData = data.body;
              }
            },
            0,
            function (msg) {
            },
            3000
          );
          // 处理视频直播
          this.$store.commit("setLive", {
            defaultImg: this.groupData.dataArr[0].data[0].more.defaultImg
          });
          this.live = new this.hs.listenLive();
          this.live.start({
            beforeTime: this.groupData.dataArr[0].data[0].more.prepareTime,
            startTime: this.groupData.dataArr[0].data[0].more.startTime,
            endTime: this.groupData.dataArr[0].data[0].more.endTime,
            afterTime: this.groupData.dataArr[0].data[0].more.finalTime,
            playUrl: this.groupData.dataArr[0].data[0].more.startStbUrl,
            beforeImg: this.groupData.dataArr[0].data[0].more.prepareImg.fhd,
            errorFlag: this.groupData.dataArr[0].data[0].more.status, // 0正常 1插播 -1异常 2关闭
            delayTime: this.groupData.dataArr[0].data[0].more.delay,
            bridge: this.bridge,
            store: this.$store,
            vedioInfo: {
              content: "1920*1080",
              offsetLeft: 790,
              offsetTop: 200,
              width: 994,
              height: 558
            }
          });
        }
      },
      getData() {
        let listSize;
        let style;
        // 获取素材.
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=9",
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              listSize = data.body.listSize;
              style = data.body.style;
              this.hs.ajax.get(
                "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                "&pageNum=1&pageSize=" +
                listSize +
                "&schoolId=" +
                this.$store.state.school.id,
                data => {
                  data = JSON.parse(data);
                  console.log(data);
                  if (data.head.code === 1) {
                    if(data.body[0].more.status !== 2) this.groupData.dataArr[0].data = data.body;
                    this.prevStb = data.body[0].more.prevStb;
                  }
                },
                0,
                function (msg) {
                },
                3000
              );
            }
          },
          0,
          function (msg) {
          },
          3000
        );

        if (this.prevStb) {
          let url =
            "http://ips-4k.hzdtv.tv/dataquery/folderContents?folderCode=" +
            this.prevStb +
            "&fields=viewpoints&pageItems=20&cImageMode=554,214,JPG&segmentIndex=1&pageIndex=1";
          this.hs.ajax.post(
            "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
            "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
            obj => {
              obj = JSON.parse(obj);
              //console.log(obj);
              if (obj.contents.length > 0) {
                let newV = obj.contents.map((item, index) => {
                  item.isPlaybsack = true
                  return item
                })
                console.log(newV);
                this.groupData.dataArr[0].data = this.groupData.dataArr[0].data.concat(
                  newV
                );
              }
            },
            0,
            function (msg) {
            },
            3000
          );
        }
      },
      goPlay(folderCode, contentId, contentType) {
        // this.$store.commit("setAppShow", false);
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" +
          folderCode +
          "&contentId=" +
          contentId +
          "&contentType=" +
          contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            let res = JSON.parse(_responseText);
            //console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                  folderCode +
                  "&contentId=" +
                  contentId +
                  "&contentType=" +
                  contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = JSON.parse(_responseText);
                    //console.log(res);
                    // this.bridge.gotoApplication2play(res.playUrl);
                    this.$store.commit('setVideoInfo', {
                      content: "1920*1080",
                      offsetLeft: 790,
                      offsetTop: 200,
                      width: 994,
                      height: 558
                    });
                    this.bridge.movies = [res.playUrl];
                    this.bridge.countFlag = 0;
                    this.bridge.initPlay();
                  },
                  0,
                  3000
                );
              } else {
                this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          },
          0,
          3000
        );
      },
      onSelect(objid, objindex){
        this.onselectId = objid
        // 判断是不是直播
        if (!this.groupData.dataArr[0].data[objindex].isPlaybsack) {
          this.startLive(objindex)
        } else {
          this.bridge.closeVedio();
          // 销毁live
          if (Object.keys(this.live).length) {
            this.live.destroyTime();
            this.live = {}
          }
          this.itemData = {
            name: this.groupData.dataArr[0].data[objindex].name,
            base: {
              createTime: this.groupData.dataArr[0].data[objindex].createTime
            },
            introduce: ""
          };
          this.goPlay(
            this.prevStb,
            this.groupData.dataArr[0].data[objindex].contentId,
            this.groupData.dataArr[0].data[objindex].contentType
          );
        }
      }
    },
    created() {
      this.getData();
    },
    mounted() {
      this.hs.initFocus("0-0");
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        if (group === 1) {
          this.bridge.fullScreen()
        } else if (group === 0) {
          this.onSelect(objid, objindex)
        }
      });

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        //console.log(JSON.stringify(focArr));
        this.hs.initFocus(focArr[0]);
      }
      // 第一个默认播放
      this.onSelect('0-0', 0)
    },
    beforeDestroy() {
      //console.log("beforeDestroy");
      this.live.destroyTime();
    }
  };

</script>

<style scoped lang="less">
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;

    .title {
      position: absolute;
      top: 77px;
      right: 121px;
      font-size: 60px;
      color: #e8e8e8;
    }

    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }

    .sidebar {
      box-sizing: border-box;
      margin-left: 120px;
      margin-right: 43px;
      flex-shrink: 0;
      width: 606px;
      height: 1080px;
      background: #6ec6e8;
      padding-top: 50px;

      .multi-container {
        ul {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0;
          padding-bottom: 50px;
          li {
            padding: 0 24px;
            width: 100%;
            list-style: none;
            display: flex;
            flex-direction: column;
            position: relative;
            margin-top: 40px;

            div {
              margin-left: 64px;
              position: relative;
              width: 489px;
              height: 274px;

              img {
                width: 100%;
                height: 100%;
              }

              p {
                position: absolute;
                height: 55px;
                width: 100%;
                line-height: 55px;
                bottom: 0;
                padding: 0 24px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                background: rgba(0, 0, 0, 0.7);
                color: #fff;
                font-size: 30px;
              }

              .voter-status {
                position: absolute;
                top: 8px;
                right: 8px;
                text-align: center;
                width: 62px;
                font-size: 12px;
                line-height: 20px;
                height: 20px;
                background: black;
                color: #ffffff;
                border-radius: 4px;
              }

              .living {
                background: #b52222;
              }

              .end {
                background: #353535;
              }

              .recover {
                background: #207960;
              }
            }

            .date {
              margin-top: 27px;
              font-size: 30px;
              margin-left: 69px;
              margin-right: 27px;
            }

            i {
              left: 24px;
              top: 35%;
              position: absolute;
              width: 30px;
              height: 30px;
              background: url("../../assets/images/xyfc/xyzb/play.png") center no-repeat;
            }
          }

          .active {
            border: 2px solid #ffffff;
            transform: scale(1.1);
            -webkit-transform: scale(1.1);
          }
        }
      }
    }
  }

</style>
